<script setup lang="ts">
import { computed, reactive } from 'vue'
import home from '@/assets/tabImg/home.png'
import homeSelected from '@/assets/tabImg/home_selected.png'
import trade from '@/assets/tabImg/trade.png'
import tradeSelected from '@/assets/tabImg/trade_selected.png'
import income from '@/assets/tabImg/income.png'
import incomeSelected from '@/assets/tabImg/income_selected.png'
import invite from '@/assets/tabImg/invite.png'
import inviteSelected from '@/assets/tabImg/invite_selected.png'
import team from '@/assets/tabImg/team.png'
import teamSelected from '@/assets/tabImg/team_selected.png'
import settings from '@/assets/tabImg/settings.png'
import settingsSelected from '@/assets/tabImg/settings_selected.png'
import router from '@/router'
import { useRoute } from 'vue-router'

const menus = reactive([
  {
    name: 'Home',
    icon: home,
    select: homeSelected,
    path: '/'
  },
  {
    name: 'Kasi',
    icon: invite,
    select: inviteSelected,
    path: '/kasi'
  },
  /*  
  {
    name: 'Pool',
    icon: income,
    select: incomeSelected,
    path: '/pool'
  },
   {
    name: 'Trade',
    icon: trade,
    select: tradeSelected,
    path: '/trade'
  }, 
  {
    name: 'Income',
    icon: income,
    select: incomeSelected,
    path: '/income'
  }, */
  {
    name: 'Team',
    icon: team,
    select: teamSelected,
    path: '/team'
  },
  {
    name: 'Settings',
    icon: settings,
    select: settingsSelected,
    path: '/settings'
  }
])
const route = useRoute()
const active = computed(() => route.name)
</script>
<template>
  <div class="bg-color fixed bottom-0 left-0 z-10 w-screen pb-24">
    <div class="flex h-108 w-full items-center justify-between px-54">
      <div
        v-for="menu in menus"
        class="flex flex-col items-center"
        :key="menu.name"
        @click="router.push({ name: menu.name })"
      >
        <img class="h-48 w-48" :src="active === menu.name ? menu.select : menu.icon" alt="icon" />
        <span class="text-24" :class="[active === menu.name ? 'text-main' : 'text-[#ffffff]']">{{
          $t(menu.name)
        }}</span>
      </div>
    </div>
  </div>
</template>
